<template>
  <div>
    <transition name="fade-transform" mode="out-in">
      <staffIndex v-if="temState.isStaffIndex" @templateChange="getTemplateChange" />
      <addStaff v-if="temState.isAddStaff" @templateChange="getTemplateChange" />
      <addAccount v-if="temState.isAddAccount" @templateChange="getTemplateChange" />
      <editStaff v-if="temState.isEditStaff" :edit-detail="temState.editDetail" @templateChange="getTemplateChange" />
    </transition>
  </div>
</template>
<script>
import staffIndex from './components/staffIndex.vue'
import addStaff from './components/addStaff.vue'
import addAccount from './components/addAccount.vue'
import editStaff from './components/editStaff.vue'
export default {
  name: 'StaffInfo',
  components: { staffIndex, addStaff, addAccount, editStaff },
  data() {
    return {
      temState: {
        isStaffIndex: true,
        isAddStaff: false,
        isAddAccount: false,
        isEditStaff: false,
        editDetail: {}
      }
    }
  },
  created() {
  },
  methods: {
    getTemplateChange(data) {
      this.temState = data
    }
  }
}
</script>
